import React, { FC } from "react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"

const data = [
    {
        name: "Page A",
        uv: 4000
    },
    {
        name: "Page B",
        uv: 3000
    },
    {
        name: "Page C",
        uv: 2000
    },
    {
        name: "Page D",
        uv: 2780
    },
    {
        name: "Page E",
        uv: 1890
    },
    {
        name: "Page F",
        uv: 2390
    },
    {
        name: "Page G",
        uv: 3490
    }
]

const BarDemo: FC = () => {
    return (
        <div style={{ width: "370px", height: "300px" }}>
            <ResponsiveContainer height="100%" width="100%">
                <BarChart width={370} height={300} data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
                    {/* 虚线网格 */}
                    <CartesianGrid strokeDasharray="3 3" />
                    {/* 横轴显示的坐标值 */}
                    <XAxis dataKey="name" />
                    {/* 纵轴会自动根据数据显示 */}
                    <YAxis />
                    <Tooltip />
                    {/* <Legend /> */}
                    <Bar dataKey="uv" fill="#8884d9" />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

export default BarDemo
